<template>
  <div>
  <el-card>
    <el-form>
      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="取件任务编号：" label-width="120px">
            <el-input v-model="page.id" placeholder="请输入快递员账户"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号：" label-width="120px">
            <el-input v-model="page.orderId" placeholder="请输入快递员姓名"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属营业部：" label-width="120px">
            <TreeSelect
              v-model="page.agentId"
              :normalizer="normalizer"
              :options="treeData"
              placeholder="请选择起始地机构"
              :appendToBody="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="预计完成时间：" label-width="120px">
            <el-date-picker
              style="width: 350px"
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际完成时间：" label-width="120px">
            <el-date-picker
              style="width: 350px"
              v-model="value3"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务分配状态" label-width="120px">
            <el-select placeholder="请选择" v-model="page.assignedStatus">
              <el-option
                v-for="item in list1"
                :key="item.assignedStatus"
                :label="item.value"
                :value="item.assignedStatus"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--    button按钮-->
      </el-row>
      <el-row>
        <el-button type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </el-row>
    </el-form>
  </el-card>
  </div>
</template>
<script>
import { getPickUpTaskPage } from '@/api/pickUptask'
import { GetListApi } from '@/api/instiution'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { TreeSelect },
  name: 'PickUptask',
  data () {
    return {
      page: {
        page: 1,
        pageSize: 10,
        taskType: 1,
        id: '',
        orderId: '',
        agencyId: '',
        minEstimatedEndTime: '', // 预计完成时间
        maxEstimatedEndTime: '',
        minActualEndTime: '', // 实际完成时间
        maxActualEndTime: '',
        assignedStatus: ''// 2:已分配 3:待人工分配
      },
      list1: [
        {
          assignedStatus: '2',
          value: '已分配'
        },
        {
          assignedStatus: '3',
          value: '待人工分配'
        }
      ],
      treeData: [],
      value2: '',
      value3: ''
    }
  },
  created () {
    this.PickUpTaskPage()
    this.getTreeData()
  },
  methods: {
    // 获取取派件分页数据
    async PickUpTaskPage () {
      const res = await getPickUpTaskPage({ page: this.page.page, pageSize: this.page.pageSize, taskType: this.page.taskType })
      console.log(res)
    },
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 获取机构树
    async getTreeData () {
      const res = await GetListApi()
      this.treeData = JSON.parse(res.data)
      console.log(this.treeData)
    }

  }
}
</script>
